<template>
	<view class="content">
		<!-- 轮播图 -->
		<u-swiper height="124" radius="0" bottom :list="swiperImages" indicator indicatorMode="line" circular
			indicatorActiveColor="#2393FF" indicatorInactiveColor="#FFFFFF"></u-swiper>
		<!-- 显示商品列表 -->
		<view class="productGrid">
			<view class="commodityBox" v-for="(item, index) in productList" :key="index" @click="goDetail(item)">
				<image class="image" :src="item.picture" mode=""></image>
				<view class="productInfo">
					<view class="">
						<p class="title">{{ item.goodsName }}</p>
						<!-- <view class="tip">{{tipMap[item.goodsName]}}</view> -->
						<view class="tip" v-if="item.goodsName=='星推官—流量引擎'">流量引擎 资源变现 圈层融合</view>
						<view class="tip" v-if="item.goodsName=='代言人—全域裂变'">市场拓展 培训赋能 价值传递</view>
						<view class="tip" v-if="item.goodsName=='服务商—智库赋能'">智库赋能 渠道服务 互利共赢</view>
						<view class="tip" v-if="item.goodsName=='爆客标准版'">引流获客 裂变推广 爆品打造</view>
						<view class="tip" v-if="item.goodsName=='运营专业版'">会员运营 营销活动 创客孵化</view>
						<view class="tip" v-if="item.goodsName=='商业旗舰版'">渠道营销  股东融资 数据决策</view>
					</view>
					<view class="flex-between">
						<view class="">
							<p class="oldMoney"> 原价:¥{{ item.msqGoodsAttrValueList[0].price || '无价格信息' }}</p>
							<p class="money">￥{{ item.msqGoodsAttrValueList[0].price || '无价格信息' }}</p>
						</view>
						<button class="btn">立即购买 <text>{{arrow}}</text></button>
					</view>
					<text class="tag" v-if="item.tagId">{{ item.tagName }}</text>
				</view>
			</view>
		</view>
		<!-- <view class="productGrid">
			<view class="commodityBox" v-for="(item, index) in productList" :key="index" @click="goDetail(item)">
				<image class="image" :src="item.picture" mode="widthFix"></image>
				<view class="productInfo">
					<p class="title">{{ item.goodsName }}</p>
					<p class="money">￥{{ item.msqGoodsAttrValueList[0].price || '无价格信息' }}</p>
				</view>
			</view>
			
		</view> -->
		<view class='noCommodity' v-if="productList.length==0 && where.page > 1">
			<view class='pictrue'>
				<image src='@/static/images/noShopper.png'></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		postGoodsPage
	} from '@/api/cate.js';
	import {
		mapGetters
	} from "vuex";
	import {
		goShopDetail
	} from '@/libs/order.js';
	import {
		getBanner
	} from '@/api/user.js';
	export default {
		computed: mapGetters(['uid']),
		data() {
			return {
				productList: [],
				where: {
					page: 1,
					limit: 20,
					goodsTypeId: null,
					isDel: "1",
					tipMap:{
						'爆客标准版':'引流获客 裂变推广 爆品打造',
						'运营专业版':'会员运营 营销活动 创客孵化',
						'商业旗舰版':'渠道营销  股东融资 数据决策',
						'星推官—流量引擎':'流量引擎 资源变现 圈层融合',
						'代言人—全域裂变':'市场拓展 培训赋能 价值传递',
						'服务商—智库赋能':'智库赋能 渠道服务 互利共赢',
					},
				},
				price: 0,
				swiperImages: [
					'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/uniappImg/classBanner.png',
					'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/uniappImg/classBanner.png'
				],
			};
		},
		onLoad(options) {
			this.$set(this.where, 'tagId', options.tagId || null);
			this.$set(this.where, 'goodsTypeId', options.goodsTypeId || null);
			this.get_product_list();
			this.getAllImage()
			uni.setNavigationBarTitle({
				title:options.goodsTypeId=='42'?'商务合作':'系统工具'
			})
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${item.id}`
				})
			},
			get_product_list(isPage) {
				let that = this;
				if (isPage === true) that.$set(that, 'productList', []);
				postGoodsPage(that.where).then(res => {
					let list = res.data.records;
					let productList = that.$util.SplitArray(list, that.productList);
					that.$set(that, 'productList', productList);
					that.$set(that.where, 'page', that.where.page + 1);
					for (var i = 0; i < that.productList.length; i++) {
						that.productList[i].blurb = that.productList[i].blurb.replace(/<[^>]+>/g, '')
					}
				})
			},
			// 获取轮播图
			getAllImage() {
				getBanner({
					typeName: '商务合作'
				}).then(res => {
					this.swiperImages = res.data.records.map(item => item.cover)
				})
			},
		},
		onReachBottom() {
			if (this.productList.length > 0) {
				this.get_product_list();
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 24rpx 32rpx;
	}

	.productGrid {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 20rpx;
		padding-top: 24rpx;
	}

	.commodityBox {
		// width: calc(50% - 12rpx);
		width: 100%;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 40rpx 22rpx 24rpx;
		position: relative;
		display: flex;
		flex-wrap: nowrap;

		.image {
			width: 198rpx;
			height: 174rpx;
			border-radius: 14rpx;
		}

		.productInfo {
			width: calc(100% - 198rpx);
			padding: 0rpx 0 0 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 32rpx;
				font-weight: 700;
				color: #28314C;
				// word-break: break-all;
				// overflow: hidden;
				// text-overflow: ellipsis;
				// display: -webkit-box;
				// -webkit-line-clamp: 2;
				// -webkit-box-orient: vertical;
				// text-align: left;
				// font-weight: bold;
			}

			.tag {
				background: linear-gradient(180deg, #FF700A 0%, #FE980B 100%);
				border-radius: 0px 14rpx 0px 18rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				padding: 4rpx 24rpx;
				position: absolute;
				right: 0;
				top: 0;
			}

			.oldMoney {
				font-size: 24rpx;
				color: #D2D2D2;
				text-decoration: line-through;
			}

			.money {
				font-size: 30rpx;
				color: #F9423A;
				font-weight: 700;
				margin-top: 6rpx;
				font-family: 'DIN';
				// text-align: right;
			}

			.btn {
				width: 178rpx;
				height: 62rpx;
				background: #0077FF;
				border-radius: 42rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.tip {
		font-size: 24rpx;
		color: #D2D2D2;
		margin-top: 10rpx;
	}
</style>